<template>
	<view>
		<view class="bc-navbar">
			<navbar title='Baage校园圈' :is-child="true" />
		</view>
		<view>
			<view class="top">
				<view class="logo">
					<u--image src="/static/logo.png" 
						width="300rpx" height="160rpx" mode="widthFix"
					></u--image>
				</view>
				<view class="search">
					<u--input
						placeholder="搜索一下~"
						prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"
						shape="circle"
						v-model="queryPosting.search"
						@change="changeSearch"
					></u--input>
				</view>
			</view>
			<view class="content" :style="'height:' + listHeight + 'px'">
				<scroll-view :scroll-y="true" @scrolltolower='loadMore'
					:style="'height:' + listHeight + 'px'"
					:refresher-enabled="enabledRefresher" :refresher-triggered="triggered"  
					refresher-background="#FFF" :refresher-threshold="100" 
				>
					<view style="padding-bottom: 8rpx;">
						<view style="width: 750rpx;height: 25rpx;background-color: #f8f8f8;"></view>
						<view v-if="queryPosting.search == ''" style="background-color: #ffe6e7; padding: 15rpx 0;">
							<view style="display: flex; justify-content: center; margin: 30rpx 0;">
								<u--image src="http://8.140.251.165:9000/baage-campus/hot_title3.png"
									width="300rpx" height="120rpx"  mode="widthFix"
								></u--image>
							</view>
							<view style="margin: 0 15rpx;">
								<view v-for="(item,index) in hotList" :key="item.id" 
									class="hot-item" 
									@click="goDetail(item.id)"
								>
									<view style="width: 1.5rem;">
										<text :class="'rank-' + (index + 1)">{{ index + 1 }}</text>
									</view>
									<u--text :text="item.abstractContent" :lines="1" ></u--text>
								</view>
							</view>
						</view>
						<view v-else>
							<view v-if="postingList.length != 0">
								<post-item v-for="(item,index) in postingList" :key="item.id" :posting="item"></post-item>
								<view>
									<u-loadmore :status="loadingStatus"
											:loading-text="loadingText" 
											:loadmore-text="loadmoreText" 
											:nomore-text="nomoreText" 
											line 
											lineColor="#d3dbe5"
											color="#6b6b6b"
									 />
								</view>
							</view>
							<view v-else style="padding-top: 80rpx; padding-bottom: 10rpx;">
								<view v-if="isLoading">
									<loading></loading>
								</view>
								<view v-else>
									<u-empty
										mode="list"
										text="空空如也~"
									></u-empty>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import navbar from '@/components/navbar/navbar.vue'
	import postItem from '@/components/post-item/post-item.vue'
	import loading from '@/components/loading/loading.vue'
	
	import { listHotPosting, listPosting } from '@/apis/posting.js'
	
	export default {
		components: {
			navbar,
			postItem,
			loading
		},
		data() {
			return {
				// 加载更多
				isLoading: false, 
				loadingStatus: "loadmore",
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '没有更多了~',
				// 高度
				listHeight: 0,
				// 业务数据
				postingList: [],
				postingCount: -1,
				hotList: [],
				// 查询条件
				queryPosting: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: 'createTime',
					isAsc: 'desc',
					userId: '',
					search: ''
				},
			}
		},
		methods: {
			/** 查询帖子 **/
			doListPosting() {
				let _this = this;
				_this.isLoading = true;
				_this.postingList = [];
				_this.queryPosting.pageNum = 1;
				listPosting(_this.queryPosting).then( res => {
					_this.postingList = res.rows;
					_this.postingCount  = res.total;
					if (res.total <= 10) {
						_this.loadingStatus = "nomore";
					}
				}).finally(r => {
					_this.isLoading = false
				})
			},
			/** 修改搜索内容 **/
			changeSearch() {
				this.doListPosting();
			},
			/** 加载更多帖子 **/
			loadMore() {
				let _this = this;
				if (_this.postingCount != -1 &&  _this.queryPosting.pageNum * _this.queryPosting.pageSize >= _this.postingCount) {
					_this.loadingStatus = "nomore";
					return;
				}
				_this.loadingStatus = "loading";
				_this.queryPosting.pageNum = _this.queryPosting.pageNum + 1;
				listPosting(_this.queryPosting).then( res => {
					_this.postingList = [..._this.postingList,...res.rows];
					_this.postingCount  = res.total;
				}).finally(r => {
					_this.loadingStatus = "loadmore";
				})
			},
			/** 设置看列表高度**/
			async setListHeight() {
				let that = this;
				// 页面高度
				let sysInfo = uni.getSystemInfoSync();
				let winHeight = sysInfo.windowHeight;
				// header 高度
				let headerHeight = 0;
				let headerView = uni.createSelectorQuery().select(".bc-navbar");
				headerView.boundingClientRect(data=>{
					headerHeight = data.height;
				}).exec(function(res) {
					that.listHeight = winHeight - headerHeight;
					let tabHeight = 0;
					let tabView =  uni.createSelectorQuery().select(".top");
					tabView.boundingClientRect(data => {
						tabHeight = data.height;
					}).exec(function(res) {
						that.listHeight = that.listHeight - tabHeight;
					})	
				});
			},
			// 热门帖子
			doListHotPosting() {
				let _this = this;
				listHotPosting().then( res => {
					_this.hotList = res.rows;
				})
			},
			// 跳转详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		},
		onReady() {
			this.setListHeight();
		},
		onLoad() {
			let _this = this;
			_this.doListHotPosting();
		},
	}
</script>

<style lang="scss" scoped>
	
	.top .logo {
		padding-top: 50rpx;
		display: flex;
		justify-content: center;
	}
	
	.top .search {
		padding-bottom: 50rpx;
		padding: 0 30rpx;
	}
	
	.content {
		margin: 0 15rpx;
	}
	
	.hot-item {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	@for $i from 1 through 10 {
		/*前5条*/
		@if $i <= 3 {
			.rank-#{$i} {
				color: #fff;
				width: 38rpx;
				height: 38rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10%;
				background-color: rgba(red, (11-$i * 2)/10);
			}
		}
		/*后5条*/
		@if $i > 3 {
			.rank-#{$i} {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(red, (24-$i * 2)/20);
			}
		}
	}


</style>
